<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-form ref="form" :model="form" label-width="140px">
                    <el-form-item label="故障类型：">
                        <el-select
                            clearable
                            v-model="form.equipType"
                            placeholder="请选择故障类型"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="故障地点：">
                        <el-cascader
                            @change="handleChange"
                            clearable
                            placeholder="请选择故障线路"
                            v-model="value"
                            :options="lineOptions"
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item label="故障时间：">
                        <el-date-picker
                            v-model="form.createTime"
                            type="date"
                            placeholder="选择日期"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="故障备注填报：">
                        <el-input
                            style="width:600px"
                            :rows="8"
                            type="textarea"
                            v-model="form.content"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="故障日志分析上传：">
                        <el-upload
                            :limit="1"
                            class="upload-demo"
                            :action="fileAction"
                            :http-request="requestHandle"
                            :file-list="fileList"
                        >
                            <el-button size="small" type="primary"
                                >点击上传</el-button
                            >
                        </el-upload>
                    </el-form-item>
                </el-form>
                <el-row>
                    <el-button
                        @click="submitHandle"
                        style="margin-left:760px"
                        type="primary"
                        >确认</el-button
                    >
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            options: [
                {
                    value: 1,
                    label: "道岔故障",
                },
                {
                    value: 2,
                    label: "联锁系统故障",
                },
                {
                    value: 3,
                    label: "计轴故障",
                },
                {
                    value: 4,
                    label: "信号机故障",
                },
                {
                    value: 5,
                    label: "屏蔽门-紧停-扣车故障",
                },
                {
                    value: 6,
                    label: "电源系统故障",
                },
                {
                    value: 7,
                    label: "DCS数据通信故障",
                },
                {
                    value: 8,
                    label: "LEU设备故障",
                },
                {
                    value: 9,
                    label: "ATS设备故障",
                },
                {
                    value: 10,
                    label: "其他设备故障",
                },
                {
                    value: 11,
                    label: "车载设备故障",
                },
            ],
            form: {
                equipType: "",
                lineLoad: "",
                stationArea: "",
                content: "",
                file: "",
                createTime: "",
            },
            editId: "",
            value: "",
            fileList: [],
            lineOptions: [],
            fileAction:
                "http://47.92.30.65:21001/api/api/services/app/FileManagement/AddFile",
        };
    },
    created() {
        this.getLineKoadCascaderList();
        this.editId = this.$route.query.editId || "";
        if (this.editId) {
            this.getFailureFillById(this.editId);
        }
    },
    methods: {
        async getLineKoadCascaderList() {
            const res = await this.$http.get(
                "/services/app/FailureFillService/GetLineKoadCascader"
            );
            if (res.data.success) {
                this.lineOptions = res.data.result || [];
            }
        },
        async submitHandle() {
            let params = this.form;
            params.userId = sessionStorage.getItem("userId") || "";
            let res;
            if (!this.editId) {
                res = await this.$http.post(
                    "/services/app/FailureFillService/CreateFailureFill",
                    params
                );
            } else {
                params.id = this.editId;
                res = await this.$http.put(
                    "/services/app/FailureFillService/UpdateFailureFill",
                    params
                );
            }
            if (res.data.result.result) {
                this.$message({
                    showClose: true,
                    message: res.data.result.message,
                    type: "success",
                });
                if (!this.editId) {
                    this.value = "";
                    this.form = {
                        equipType: "",
                        lineLoad: "",
                        stationArea: "",
                        content: "",
                        file: "",
                        createTime: "",
                    };
                }
            }
        },
        handleChange(val) {
            this.form.lineLoad = val[0] || "";
            this.form.stationArea = val[1] || "";
        },
        handleRemove() {},
        async requestHandle(params) {
            let formData = new FormData();
            formData.append("module", "ss");
            formData.append("file", params.file);
            formData.append('"description": ', "ss");
            const res = await this.$http.post("/File/FileUpload", formData);
            this.form.file = res.data.result || "";
        },
        async getFailureFillById(id) {
            const {
                data,
            } = await this.$http.get(
                "/services/app/FailureFillService/GetFailureFill",
                { params: { id: id } }
            );
            console.log(data.result, "res");
            this.form = data.result;
            this.value = [this.form.lineLoad, this.form.stationArea];
            this.fileList = [{ name: data.result.file.fileName }];
        },
    },
};
</script>
<style lang="less" scoped>
/deep/ .el-input {
    input {
        background-color: var(--input-bgc);
    }
}
/deep/ .el-input__inner::placeholder {
    color: var(--input-fc);
}
/deep/ .el-form-item__label {
    color: var(--input-fc);
}
/deep/ .el-form-item__content {
    .el-textarea__inner {
        background-color: var(--input-bgc);
    }
}
/deep/ input {
    color: #fff;
}
.el-select,
.el-cascader {
    /deep/ input[placeholder] {
        &::placeholder {
            color: #fff;
        }
    }
}
.el-textarea {
    /deep/ textarea {
        color: #fff;
    }
}
</style>
